<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="pages/common/main :: layout(~{::title}, ~{::section}, ~{::link}, ~{::script})">
    <head>
        <title>Setting表单</title>
        <link rel="stylesheet" th:href="@{/assets/expand/module/dtree/dtree.css}">
        <link rel="stylesheet" th:href="@{/assets/expand/module/dtree/font/dtreefont.css}">
    </head>
    <body>
        <section>

            <div class="layui-card">
                <div class="layui-card-header">[[${header}]]</div>
                <div class="layui-card-body">
                    <form name="menu" class="layui-form layui-form-pane" lay-filter="FORM">
                        <input type="hidden" name="id" th:value="${setting.getId()}">

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="menu-title">名称</label>
                            <div class="layui-input-block">
                                <input id="menu-title" name="title" class="layui-input" lay-verify="required"
                                       th:value="${setting.getTitle()}"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="menu-href">地址</label>
                            <div class="layui-input-block">
                                <input id="menu-href" name="url" class="layui-input" th:value="${setting.getUrl()}"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="setting-icon">图标</label>
                            <div class="layui-input-block">
                                <input id="setting-icon" name="icon" class="layui-input"
                                       th:value="${setting.getIcon()}"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">激活</label>
                            <div class="layui-input-block yak-radios">
                                <input type="radio" name="active" th:each="item:${activeLabels}"
                                       th:value="${item.key}" th:title="${item.value}"
                                       th:checked="${item.key==setting.getActive()}"
                                >
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="setting-pid">父元素</label>
                            <div class="layui-input-block">
                                <ul id="setting-pid" class="dtree" data-id="0" th:data-value="${setting.getPid()}"></ul>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">位置</label>
                            <div class="layui-input-block">
                                <input type="radio" name="position" th:each="item:${positionLabels}"
                                       th:value="${item.key}" th:title="${item.value}"
                                       th:checked="${item.key==setting.getPosition()}"
                                />
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-block yak-radios">
                                <input type="radio" name="type" th:each="item:${typeLabels}"
                                       th:value="${item.key}" th:title="${item.value}"
                                       th:checked="${item.key==setting.getType()}"
                                />
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label" for="menu-event">事件</label>
                            <div class="layui-input-block">
                                <input id="menu-event" name="event" class="layui-input"
                                       th:value="${setting.getEvent()}"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" for="menu-sort">排序</label>
                            <div class="layui-input-block">
                                <input id="menu-sort" name="sort" class="layui-input" th:value="${setting.getSort()}"/>
                            </div>
                        </div>

                        <div class="layui-form-item layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="form-submit">立即提交</button>
                        </div>

                    </form>
                </div>
            </div>

        </section>
        <script th:inline="javascript">
            layui.use(['element', 'form', 'jquery', 'iconPicker', 'ax', 'dtree', 'admin'], function () {
                var form = layui.form,
                    iconPicker = layui.iconPicker,
                    $ax = layui.ax;

                form.on('submit(form-submit)', function (data) {
                    var ajax = new $ax(Kong.ctxPath + "/sys/setting/save", function (data) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index)
                        top.layui.admin.refresh()
                    });
                    // console.log(data)
                    // ajax.setHeadersValue("Model-Class", "");
                    ajax.setMethod("post");
                    ajax.setData(data.field);
                    ajax.send();
                    return false;
                })

                iconPicker.render({
                    elem: '#setting-icon', type: 'fontClass', search: true,
                    click: function (data) {
                    }
                });

                var dtree = layui.dtree;
                dtree.render({
                    elem: "#setting-pid",
                    width: "100%",
                    data: /*[(${pidLabels})]*/[],
                    selectInputName: {nodeId: "pid"},
                    select: true,
                    skin: "layui"
                });

            });

        </script>
    </body>
</html>